<template>
	<div class="wrap">

		<van-tabs v-model:active="active" color="#66d6ff" @change="onClickTab">
			<van-tab v-for="item in AgencySource" :key="item.name" :title="item.name" :name="item.value" />
		</van-tabs>

		<div class="search">
			<div class="left">
				<van-field v-model="seData.tusn" :border="false" placeholder="请输入机具号" />
				<div class="bg" @click="sayToFather">
					<img src="@/assets/srarch.png" alt="" />
				</div>
			</div>
			<div class="right" @click="getFindByTargetAndClassesId">
				<span>筛选</span>
				<img src="@/assets/select.png" alt="" />
			</div>
		</div>
		<van-popup v-model:show="show" position="right" :style="{ width: '70%', height: '100%' }">
			<div class="popup-content">
				<div class="title" v-if="showSerchBind === 'allot'">按照号段检索</div>
				<div class="item retrieval" v-if="showSerchBind === 'allot'">
					<div class="top1">
						<van-field v-model="seData.startPosSn" placeholder="开始号段" />
					</div>
					<div style="text-align: center; padding: 5px; width: 100%">-</div>
					<div class="bottom1">
						<van-field v-model="seData.stopPosSn" placeholder="结束号段" />
					</div>
				</div>
				<div
					v-if="showSerchBind !== 'allot' && showSerchBind !== 'editRate' && showSerchBind !== 'sateActive' && showSerchBind !== 'setSim'">
					<div class="title">绑定状态</div>
					<div class="item">
						<div @click="seData.status = item.type"
							:class="seData.status === item.type ? 'option active' : 'option'" v-for="item in optionList"
							:key="item.type">
							{{ item.name }}
						</div>
					</div>
					<div class="title">唤醒状态</div>
					<div class="item">
						<div @click="seData.isActivate = item.status"
							:class="seData.isActivate === item.status ? 'option active' : 'option'"
							v-for="item in activeList" :key="item.status">
							{{ item.name }}
						</div>
					</div>
				</div>

				<div class="title">活动类型</div>
				<div class="item" style="flex-wrap: wrap">
					<div @click=";(seData.actCode = item.name), (seData.activityCode = item.id)"
						:class="seData.activityCode === item.id ? 'option active' : 'option'" v-for="item in actList"
						:key="item.id">
						{{ item.name }}
					</div>
				</div>
				<div class="btn">
					<div class="left" @click="reset">重置</div>
					<div class="right" @click="search">确定</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script lang="ts">
	import { findByTargetAndClassesId } from '@/api/dataAnalysis'
	import { findAgencySource } from "@/api/agent";

	export default defineComponent({
		name: 'terminalSearch',
		props: {
			text: {
				type: String
			},
			type: {
				type: String
			},
			showSerchBind: {
				type: String
			}
		},
		setup(props, context) {
			const state = reactive({
				show: false,
				actList: [],
				active: 0,
				AgencySource: [
					// {name: "全部", value: ""},
				],
				seData: {
					isActivate: '',
					activityCode: '',
					actCode: '',
					agencySource: '',
					startPosSn: '',
					stopPosSn: '',
					status: '',
					posSn: '',
					pageSize:''
				},
				optionList: [
					{ name: '全部', type: '' },
					{ name: '已绑定', type: 'TRANS' },
					{ name: '未绑定', type: 'ASSIGN' }
				],
				activeList: [
					{ name: '全部', status: '' },
					{ name: '已唤醒', status: 'Y' },
					{ name: '未唤醒', status: 'N' }
				]
			})
			const getFindByTargetAndClassesId = () => {
				state.actList = []
				findByTargetAndClassesId({
					agencySource: state.seData.agencySource
				}).then(res => {
					state.actList.push({ name: '全部活动', id: '' })
					state.actList = state.actList.concat(...res.object)
					state.show = true
				})
			}
			const reset = () => {
				state.seData.isActivate = ''
				state.seData.activityCode = ''
				state.seData.startPosSn = ''
				state.seData.stopPosSn = ''
				state.seData.actCode = ''
				state.seData.status = ''
				state.seData.pageSize = '200'
				context.emit('reset', [])
			}
			const search = () => {
				if (state.seData.actCode === '全部活动') {
					state.seData.actCode = ''
				}
				state.show = false
				context.emit('listen', state.seData)
			}
			const gatFindAgencySource = () => {
				findAgencySource({}).then(res => {
					state.AgencySource = state.AgencySource.concat(res.object)
				})
			}
			gatFindAgencySource()
			const onClickTab = (e) => {
				console.log(e, 'e1111')
				// if(props.type !== 'setSim'){
				reset()
				state.seData.agencySource = e
				context.emit('listen', state.seData)
				// }

			}
			// context作用是获取上下文对象，
			// 如果setup写法为setup(props, { emit })的方式的话，下面的context可以省略
			const sayToFather = () => {
				console.log(state.seData, 'state.seData')
				// state.seData.posSnOrTusn = state.seData.tusn
				context.emit('listen', state.seData)
			}
			return {
				...toRefs(state),
				sayToFather,
				onClickTab,
				reset,
				search,
				getFindByTargetAndClassesId
			}
		}
	})
</script>

<style lang="scss" scoped>
	.num {
		color: #fffffe;
		//margin-left: 22rpx;
		padding: 10px 10px 0 10 rpx;
		font-size: 14px;
		display: flex;
		align-items: center;
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
	}

	.numAllSrc {
		margin-right: 15px;
		height: 16px;
		width: 16px;
	}

	.serc {
		justify-content: space-between;
		background: linear-gradient(180deg, #66d6ff 0%, #66d6ff 100%);
		position: -webkit-sticky;
		position: sticky;
		top: var(--window-top);
		z-index: 99;
	}

	.top {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.search {
			flex: 1;
			height: 100%;
			border-radius: 17px;
			background: #ffffff;
			overflow: hidden;
			display: flex;
			align-items: center;

			.searchImg {
				width: 66px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #66d6ff;
			}
		}

		.screen {
			width: 20%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			display: inline-block;

			span {
				font-size: 15px;
				//font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
			}

			image {
				width: 15px;
				height: 15px;
				margin-left: 10px;
				vertical-align: middle;
			}
		}
	}

	.popup-content {
		padding: 10px;

		.title {
			font-size: 14px;
			//font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #000000;
			margin-top: 15px;
		}

		.item {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.option {
				display: flex;
				align-items: center;
				font-size: 14px;
				justify-content: center;
				padding: 10px;
				margin: 10px;
				background: #f2f2f2;
				border-radius: 5px;
				//font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				color: #545454;
			}

			.option.active {
				color: #ffffff;
				background: linear-gradient(180deg, #66d6ff 0%, #66d6ff 100%);
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 0;
			font-size: 15px;

			view {
				width: 75px;
				height: 23px;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 1;
				padding: 10px;
				//font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
			}

			.left {
				color: #9a9a9a;
				border: 1px solid #9a9a9a;
			}

			.right {
				margin-left: 15px;
				background: #66d6ff;
				opacity: 1;
				color: #ffffff;
				border: 1px solid #66d6ff;
			}
		}
	}

	.wrap {}

	.search {
		padding: 0 10px;

		height: 35px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 263px;
			background: #ffffff;
			opacity: 1;
			border-radius: 17px;
			overflow: hidden;
			display: flex;
			align-items: center;
			height: 100%;
			margin-right: 10px;

			.bg {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 66px;
				height: 100%;
				background: #66d6ff;

				img {
					width: 20px;
				}
			}
		}

		.right {
			height: 100%;
			flex: 1;
			background: #ffffff;
			opacity: 1;
			border-radius: 17px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0;

			span {
				font-size: 14px;
				margin-right: 10px;
			}

			img {
				width: 18px;
			}
		}
	}

	.btn {
		div {
			padding: 10px 20px;
			border-radius: 5px;
		}
	}

	.retrieval {
		padding: 10px 0;
		width: 100%;

		.top1,
		.bottom1 {
			background-color: #f2f2f2;
			width: 100%;
			border-radius: 10px;

			.van-cell {
				background-color: transparent;
				width: 100%;
			}
		}
	}
</style>